<template>
	<view class="index-list animate__animated animate__fadeInLeft animate__fast" v-show="show">
		<view class="index-head flex-sp-ac">
			<view>
				<!--mode="widthFix" 不可被压缩 -->
				<image class="index-userpic uni-mr-5" :src="item.userPic" mode="widthFix" lazy-load>
				</image>
				{{item.nikname}}
			</view>
			<view>
				<view v-if="!item.isFollow" class="concern" @tap="concernChange()">
					<view class="icon iconfont icon-zengjia">
						关注
					</view>
				</view>
				<view v-if="item.isFollow" class="unconcern" @tap="concernChange()">
					已关注
				</view>
				<view class="icon iconfont icon-guanbi" @tap="close()"></view>
			</view>
		</view>
		<view class="index-title" @tap="openDetail">
			{{item.title}}
		</view>
		<view class="index-content flex-sc-ac">
			<image :src="item.titlePic" mode="widthFix" lazy-load @tap="openDetail"></image>
			<template v-if="item.type=='video'">
				<view class="icon iconfont icon-bofang index-list-play"></view>
				<view class="index-list-playinfo">{{item.playNum}}次播放 {{item.long}}</view>
			</template>
		</view>
		<view class="index-foot">
			<view>
				<view class="uni-mr-5">
					<view class="icon iconfont icon-icon_xiaolian-mian uni-mr-3"
						:class="{'active-like':(item.infoNum.index==1)}" @tap="like()"></view>
					<view style="padding-top: 10rpx;">{{item.infoNum.topNum}}</view>
				</view>
				<view>
					<view class="icon iconfont icon-kulian uni-mr-3" :class="{'active-dislike':(item.infoNum.index==2)}"
						@tap="dislike()"></view>
					<view style="padding-top: 10rpx;">{{item.infoNum.lowNum}}</view>
				</view>
			</view>
			<view>
				<view class="uni-mr-5">
					<view class="icon iconfont icon-pinglun1 uni-mr-3"></view>
					<view style="padding-top: 10rpx;">{{item.commentNum}}</view>
				</view>
				<view>
					<view class="icon iconfont icon-zhuanfa uni-mr-3"></view>
					<view style="padding-top: 10rpx;">{{item.shareNum}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//通过props将父组件的值传入到子组件中
			item: Object, //Object表示对象类型
			index: Number
		},
		name: "index-list",
		data() {
			return {
				show:true
			};
		},
		methods: {
			like() {
				if (this.item.infoNum.index == 0) {
					this.item.infoNum.index = 1;
					this.item.infoNum.topNum++;
				} else if (this.item.infoNum.index == 2) {
					this.item.infoNum.index = 1;
					this.item.infoNum.topNum++;
					this.item.infoNum.lowNum--;
				} else {
					this.item.infoNum.index = 0;
					this.item.infoNum.topNum--;
				}
			},
			dislike() {
				if (this.item.infoNum.index == 0) {
					this.item.infoNum.index = 2;
					this.item.infoNum.lowNum++;
				} else if (this.item.infoNum.index == 1) {
					this.item.infoNum.index = 2;
					this.item.infoNum.topNum--;
					this.item.infoNum.lowNum++;
				} else {
					this.item.infoNum.index = 0;
					this.item.infoNum.lowNum--;
				}
			},
			concernChange() {
				this.item.isFollow = !this.item.isFollow;
				if (this.item.isFollow == true) {
					uni.showToast({
						title: '关注成功'
					});
				} else {
					uni.showToast({
						title: '取消关注'
					});
				}
			},
			close() {
				this.show = !this.show
			},
			openDetail(){
				uni.navigateTo({
					url:'../../pages/common-detail/common-detail?detailData=' + JSON.stringify(this.item)
				});
			}
		}
	}
</script>

<style scoped>
	.index-list {
		padding: 20rpx;
		border-bottom: 1px solid #D5D5D5;
	}

	.uni-mr-5 {
		margin-right: 12rpx;
	}

	.uni-mr-3 {
		margin-right: 8rpx;
	}

	/* 设置图片大小 */
	.index-head .index-userpic {
		width: 85rpx;
		height: 85rpx;
		border-radius: 100%;
	}

	.index-head>view {
		display: flex;
		align-items: center;
	}

	.index-head>view:first-child {
		color: #B1B1B1;
	}

	.index-head>view:last-child {
		font-size: 28rpx;
	}

	/*
	.index-head>view:last-child>view:first-child {
		background-color: #FFB846;
		color: #F1F1F1;
		display: flex;
		align-items: center;
		padding: 7rpx;
		border-radius: 5%;
	}
*/
	.index-title {
		padding: 15rpx 0;
		font-size: 32rpx;
	}

	.index-content>image {
		width: 100%;
		border-radius: 20rpx;
	}

	.index-foot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #D5D5D5;
	}

	.index-foot>view {
		display: flex;
		align-items: center;
	}

	.index-foot>view>view {
		display: flex;
		align-items: center;
	}

	/* 对播放信息进行定位 */
	.index-content {
		position: relative;
	}

	.index-list-play {
		position: absolute;
		color: #FFFFFF;
		font-size: 180rpx;
	}

	.index-list-playinfo {
		position: absolute;
		right: 15rpx;
		bottom: 10rpx;
		color: #FFFFFF;
		background-color: rgba(102, 106, 109, 0.5);
		padding: 12rpx 15rpx;
		border-radius: 25rpx;
		font-size: 30rpx;
		line-height: 25rpx;
	}

	.active-like {
		color: #09BB07;
	}

	.active-dislike {
		color: #FF3333;
	}

	.concern {
		background-color: #09BB07;
		color: #F1F1F1;
		display: flex;
		align-items: center;
		border-radius: 6%;
		padding: 7rpx;
		margin-right: 10rpx;
	}

	.unconcern {
		background-color: #FFB846;
		color: #F1F1F1;
		display: flex;
		align-items: center;
		border-radius: 6%;
		padding: 7rpx;
		margin-right: 10rpx;
	}
</style>
